<template>
  <div class="header-top">
    <div class="header-top-logo">
      <router-link to="/home">
        <img src="@/assets/imgs/logo.png" alt="">
      </router-link>
    </div>
    <div class="header-top-slogan">
      <img src="@/assets/imgs/logo_zx.png" alt="">
    </div>
    <div class="header-top-info">
      <div class="announce">
        <div class="announce-content">
          <svg class="svg" aria-hidden="true">
            <use xlink:href="#iconindex_gonggao"></use>
          </svg>
          <span class="announce-notice">公告</span>
          <span class="announce-text">凡在发行当日使用10元抵扣卷红包,可在次日额外获得20元</span>
        </div>
        <div class="tabs">
          <div class="tabs-item">
            <span class="tab network-test hover-style">路线检测</span>
            <span class="tab helping-center hover-style">帮助中心</span>
            <span class="tab complaining hover-style">投诉建议</span>
            <span class="tab all-games hover-style">全部游戏</span>
          </div>
          <div class="more-games">
            <span class="iconfont"><i>icon</i></span>
          </div>
        </div>
      </div>
      <div class="other-info">
        <div class="wrapper" :class="showBalanceDetail ? 'active' : ''">
          <div class="other-info-item account" 
              @mouseenter="unfoldBalanceDetail"
              @mouseleave="foldBalanceDetail">
            <div class="balance-detail-wrapper" v-show="showBalanceDetail">
              <balance-detail :isVisbleToo="isVisible"></balance-detail>
            </div>
            <span class="remain-money">余额：
              <span ref="amount" class="amount">
                <span v-show="isVisible" class="amount-numbers">88888888</span>
                <span v-show="!isVisible" class="amount-hide">********</span>
              </span>
            </span>
            <span class="icon icon-down hover-style" >
              <i class="iconfont iconty_zhankai">
              </i>
            </span>
            <span class="icon icon-visible hover-style"
              @click="toggleVisibleClick"
            ><i class="iconfont" :class="isVisible ? 'iconpwd-visible' : 'iconpwd-hidden'"></i>
            </span>
            <span 
              @click="updateAmountInfo"
              :class="isRotating ? 'rotate' : ''"
              class="icon icon-refresh hover-style"><i class="iconfont iconrefresh"></i></span>
          </div>
        </div>
        <div class="other-info-item put-money hover-style" :class="showBalanceDetail ? 'no-border' : '' ">充值</div>
        <div class="other-info-item hover-style">提现</div>
        <div class="other-info-item hover-style">转换</div>
        <div class="other-info-item hover-style">
          <span class="icon icon-msg" @click="checkMsg">
            <i class="iconfont iconindex_xiaoxi"></i>
            <span class="msg-hint">12</span>
          </span>
        </div>
        <div class="other-info-item hover-style" @click="toggleSoundClick">
          <span 
            class="icon hover-style">
            <i 
              class="iconfont" :class="isSoundOn ? 'iconindex_tishiyin_kai' : 'iconindex_tishiyin_guan'">
            </i>
          </span>
          <span class="sound">提示音</span>
        </div>
        <div class="other-info-item hover-style">
          <span class="icon"><i class="iconfont icongd_zaixiankefu"></i></span>
          <span class="online-service">在线客服</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BalanceDetail from './components/balance-detail'
export default {
  components: {
    BalanceDetail
  },
  data() {
    return {
      isSoundOn: true,
      isVisible: true,
      isRotating: false,
      showBalanceDetail: false 
    }
  },
  methods: {
    toggleSoundClick() {
      this.isSoundOn = !this.isSoundOn
    },
    toggleVisibleClick() {
      this.isVisible = !this.isVisible
    },
    unfoldBalanceDetail() {
      this.showBalanceDetail = true
    },
    foldBalanceDetail() {
      this.showBalanceDetail = false 
    },
    checkMsg() {
      this.$router.push({path: '/my-account/msg'})
    },
    updateAmountInfo() {
      this.isRotating = true
      setTimeout(() => {
        this.isRotating = false
      }, 2000)
    }
  }
}
</script>

<style lang="stylus">
  @import '~@/assets/styles/variables.styl'
  .header-top
    width 1200px
    height 80px
    margin 0 auto
    display flex
    align-items center
    .header-top-logo
      width 155px
      margin-right 30px
      img 
        width 100%
    .header-top-slogan
      width 210px
      img 
        width 100%
    .header-top-info
      flex 1
      height 80px
      .announce
        display flex
        height 30px
        line-height 30px
        background: $color-nav-bg
        border-bottom-left-radius 6px
        border-bottom-right-radius 6px
        border-bottom 1px solid $color-nav-border
        .announce-content
          color $color-text-yellow
          border-right 1px solid $color-nav-border
          box-sizing border-box
          margin-left 10px
          width 430px
          .svg 
            font-size 16px
          .announce-notice
            color $color-theme-red
            font-weight 700
            margin-right 9px
        .tabs
          display flex
          align-items center
          height 30px
          .tabs-item 
            display flex
            align-items center
            .tab
              width 79px
              height 14px 
              line-height 14px
              text-align center
              border-right 1px solid $color-divide-line
              &:last-child
                border-right none
              &.network-test 
                color #F812F4
              &.complaining
                color #0088FF
              &.helping-center 
                color #ff0000
              &.all-games 
                color #B5855B
      .other-info
        display flex
        align-items center
        height 50px
        justify-content flex-end
        .wrapper 
          height 100%;
          display flex 
          align-items center 
          .other-info-item 
            border-right none !important 
          &.active
            background $color-text-button
            .other-info-item 
              border none !important 
        .other-info-item
          display flex 
          align-items center 
          justify-content center
          border-left 1px solid $color-divide-line
          padding 0 10px
          min-width 60px
          height 14px 
          line-height 14px
          &.account 
            position relative 
            .balance-detail-wrapper
              position absolute 
              left 0
              right 0
              top 30px
              background #fff 
              width 100%
              z-index 1000
          &.put-money 
            color $color-theme-red
            &.no-border 
              border-left none !important  
          .sound 
            margin-left 5px
          .online-service
            margin-left 5px
          .remain-money
            color $color-theme-red
          .icon-down 
            margin-left 10px
            .iconfont 
              font-size 14px 
              color $color-theme-red 
          .icon-visible 
            display inline-block
            width 20px
            height 14px
            margin 0 10px
            color #8C8F98
            .iconfont 
              font-size 18px
          .icon-refresh
            color #8C8F98
            .iconfont 
              font-size 14px
          .icon-msg
            position relative 
            .msg-hint 
              position absolute 
              width 16px 
              height 12px
              line-height 12px 
              border-radius 6px
              background $color-theme-red 
              color #fff
              font-size 12px
              top -6px
              right -16px
          .online-service
            vertical-align top
            display inline-block
        .other-info-item:last-child
          border-right 1px solid $color-divide-line
</style>